<template>
	<uni-popup ref="popup" type="bottom" background-color="#fff" height="100vh" :is-bottom="false">
		<view class="popup" :style="{height: isHome == 0 ?'50vh': height + 'px'}">
			<view class="popupTitle flexbc">
				<view @click="closeSearch">
					<fui-icon name="close" size="48"></fui-icon>
				</view>
				<view>
					<text style="float:left;font-size:36rpx;">筛选</text>
					<view style="float:left;padding:7rpx" v-if="selectCount > 0">
						<fui-badge :value="selectCount" background="#ff0000" color="#fff"></fui-badge>
					</view>
				</view>
				<view></view>
			</view>
			<view class="popupCity flexbc">
				<view>{{ MyCity.text }}</view>
				<view style="color:#00cbff" @click="selectAllCity">全部城市</view>
				<view style="color:#00cbff" @click="selectCurrCity">选择定位城市</view>
			</view>
			<view style="height:100rpx">
				<view style="float:left;padding:30rpx;">选择地区</view>
				<view @click="showCity" style="float:right;padding:30rpx;">{{formData.city}}</view>
			</view>
			<view class="popupLabelBoxs" v-if="searchType == 1">
				<search-notice ref="notice" :Labels="Labels" @searchLabel="searchLabel"
					:isClean="isClean"></search-notice>
			</view>
			<view class="popupLabelBoxs" v-if="searchType == 2">
				<search-reservation ref="reservation" :Labels="Labels" :searchSex="searchSex" :chargeModes="chargeModes"
					@selectLabel="selectLabel" @onSearchSex="onSearchSex" @selectCharge="selectCharge"
					:isClean="isClean"></search-reservation>
			</view>
			<view class="popupLabelBoxs" v-if="searchType == 3">
				<search-works ref="works" :Labels="Labels" :searchSex="searchSex" @searchLabel="searchLabel"
					@onSearchSex="onSearchSex" :isClean="isClean"></search-works>
			</view>
			<view class="popupBottom flexbc">
				<button class="popupClearBtn" @click="closeSearch">清除</button>
				<button class="popupSubmitBtn" @click="confirmSearch(searchType)">确定</button>
			</view>
			<fui-picker linkage :layer="2" :options="cityOptions" :show="cityShow" @change="changeCity"
				@cancel="pickerCancel('city')"></fui-picker>
		</view>
	</uni-popup>
</template>

<script>
	import cityData from "@/script/city.js"
	import SearchNotice from "./search-notice"
	import SearchReservation from "./search-reservation"
	import SearchWorks from "./search-works"

	export default {
		name: 'IndexSearch',
		components: {
			SearchNotice,
			SearchReservation,
			SearchWorks
		},
		props: {
			MyCity: {
				type: [Object, Array],
				default: {}
			},
			Labels: {
				type: [Object, Array],
				default: {}
			},
			searchSex: {
				type: [Object, Array],
				default: []
			},
			chargeModes: {
				type: [Object, Array],
				default: []
			},
			isHome: {
				type: Number,
				default: 0
			},
			// searchType: {
			// 	type: Number,
			// 	default: 0
			// }
		},
		data() {
			return {
				isClean: false,
				height: 0,
				selectCount: 0,
				cityShow: false,
				cityOptions: [],
				addCity: false,
				formData: {
					cityJson: {},
					city: '全部',
					cityCode: []
				},
				searchType: 0,
				currSearchLabel: 0,
				addLabel: false,
				noticeObj: {
					selectCount: 0,
					cityCode: 0,
					isNotice: false,
				},
				reservationOrderObj: {
					reservationOrderObjID: 0,
					searchSex: -1,
					SearchPriceType: -1,
					cityCode: 0,
					isReservationOrderobj: false,
					isSex: false,
					isFeeModel: false
				},
				worksObj: {
					selectCount: 0,
					searchSex: -1,
					cityCode: 0,
					isPublisher: false,
					isSex: false
				}
			}
		},
		mounted() {
			let time = 80
			// #ifdef H5
			time = 200
			// #endif

			// 获取右上胶囊按钮
			let meun = uni.getMenuButtonBoundingClientRect()
			setTimeout(() => {
				this.height = uni.getSystemInfoSync().windowHeight - meun.height - meun.top;
			}, time)
			this.cityOptions = cityData.cityData
		},
		methods: {
			// 确定筛选
			confirmSearch(confirmType) {
				let options = {};
				switch (confirmType) {
					case 1:
						options = {
							roleID: this.noticeObj.roleID ? this.noticeObj.roleID : 0, // 招募身份ID
							cityCode: this.noticeObj.cityCode ? this.noticeObj.cityCode : 100000, // 地址
						};
						break;

					case 2:
						options = {
							reservationOrderObj: this.reservationOrderObj.reservationOrderObjID ? this
								.reservationOrderObj.reservationOrderObjID : 0, // 约单对象
							searchSex: this.reservationOrderObj.searchSex != -1 ? this.reservationOrderObj.searchSex :
								-1, // 性别
							SearchPriceType: this.reservationOrderObj.SearchPriceTyp != -1 ? this.reservationOrderObj
								.SearchPriceType : -1, // 收费模式
							cityCode: this.reservationOrderObj.cityCode ? this.reservationOrderObj.cityCode :
							100000, // 地址
						};
						break;
					case 3:
						options = {
							roleID: this.worksObj.roleID ? this.worksObj.roleID : 0, // 发布人ID
							searchSex: this.worksObj.searchSex != -1 ? this.worksObj.searchSex : -1, // 性别
							cityCode: this.worksObj.cityCode ? this.worksObj.cityCode : 100000, // 地址
						};
						break;
				}

				this.$emit('confirmSearch', options)
				this.$refs.popup.close()

				// 清除数据
				this.claseData()
			},
			// 判断是否需要角标累加
			accrualHandler(data, isBool, condition) {
				/* 
				 data 要判断的数据
				 condition 	数据需要比对的值
				 isBool  是否累加 
				 */
				let isBoolData = isBool;
				if (data !== condition && isBoolData == false) {
					this.selectCount = this.selectCount + 1;
					isBoolData = true;
				} else {
					if (data == condition) {
						isBoolData = false;
						this.selectCount = this.selectCount - 1;
					}
				}
				return isBoolData;
			},
			// 选择约单类型
			selectLabel(params) {
				this.reservationOrderObj.reservationOrderObjID = params;
				this.reservationOrderObj.isReservationOrderobj = this.accrualHandler(params, this.reservationOrderObj
					.isReservationOrderobj, 0)
			},
			// 选择约单性别
			onSearchSex(params, isType) {
				// console.log(params)
				// console.log(isType)
				if (isType == 0) {
					this.reservationOrderObj.searchSex = params;
					this.reservationOrderObj.isSex = this.accrualHandler(params, this.reservationOrderObj.isSex, -1);
				}
				if (isType == 1) {
					this.worksObj.searchSex = params;
					this.worksObj.isSex = this.accrualHandler(params, this.worksObj.isSex, 0);
				}
			},
			// 选择约单收费模式
			selectCharge(params) {
				this.reservationOrderObj.SearchPriceType = params;
				this.reservationOrderObj.isFeeModel = this.accrualHandler(params, this.reservationOrderObj.isFeeModel, -1);
			},

			openSearch(type) {
				this.searchType = type
				this.$refs.popup.open('bottom')
			},

			// 清除数据
			closeSearch() {
				this.claseData()
				this.$refs.popup.close()
				this.$emit('closeSearch', true)
			},

			// 清除数据
			claseData() {
				// 触发子组件 watch
				this.isClean = !this.isClean;

				this.formData.city = '全部'

				// 筛选上方红色背景数字
				this.selectCount = 0;
				// 表示选地址当前红色文字数量可叠加
				this.addCity = false;

				// 初始化地址数据
				this.noticeObj.cityCode = 100000;
				// 表示选 "通告内的身份" 当前红色文字数量可叠加
				this.noticeObj.isNotice = false;

				this.worksObj.cityCode = 100000;
				// 表示选 "作品内性别" 当前红色文字数量可叠加
				this.worksObj.isSex = false;
				// 表示选 "作品内身份" 当前红色文字数量可叠加
				this.worksObj.isPublisher = false;

				// 初始化地址数据
				this.reservationOrderObj.cityCode = 100000;
				// 表示选 "约单内身份" 当前红色文字数量可叠加
				this.reservationOrderObj.isReservationOrderobj = false;
				// 表示选 "约单内性别" 当前红色文字数量可叠加
				this.reservationOrderObj.isSex = false;
				// 表示选 "约单内收费模式" 当前红色文字数量可叠加
				this.reservationOrderObj.isFeeModel = false;

			},

			// 选择身份
			searchLabel(roleID, isType) {
				// console.log('roleID', roleID)
				// console.log('isType', isType)
				if (isType == 0) {
					this.noticeObj.roleID = roleID;
					this.noticeObj.isNotice = this.accrualHandler(roleID, this.noticeObj.isNotice, 0)
				}
				if (isType == 1) {
					this.worksObj.roleID = roleID;
					this.worksObj.isPublisher = this.accrualHandler(roleID, this.worksObj.isPublisher, 0);
				}
			},
			// 选择定位城市
			selectCurrCity() {
				// 显示地址
				this.formData.city = this.MyCity.text;

				// 地址赋值
				this.noticeObj.cityCode = this.MyCity.subText;
				this.reservationOrderObj.cityCode = this.MyCity.subText;
				this.worksObj.cityCode = this.MyCity.subText;

				// 当前是否在筛选上角标数字累加
				this.addCityr = this.accrualHandler(this.formData.city, this.addCity, '全部');
			},
			// 选择全部城市
			selectAllCity() {
				this.formData.city = '全部';

				// 初始化地址数据
				this.formData.cityCode = 100000;
				this.noticeObj.cityCode = 100000;
				this.reservationOrderObj.cityCode = 100000;
				this.worksObj.cityCode = 100000;

				if (this.selectCount !== 0) {
					this.selectCount = this.selectCount - 1
					this.addCity = false
				}

			},
			showCity() {
				this.cityShow = true
				// console.log('this.cityShow', this.cityShow)
			},
			// 选择 picke 数据
			changeCity(e) {
				// console.log(e)

				this.formData.city = e.result;
				this.formData.cityCode = e.value;

				this.noticeObj.cityCode = e.value;
				this.reservationOrderObj.cityCode = e.value;
				this.worksObj.cityCode = e.value;

				this.cityShow = false;

				if (this.formData.city !== '全部' && this.addCity == false) {
					this.addCity = true;
					this.selectCount = this.selectCount + 1;
				}
			},
			pickerCancel(type) {
				if (type == 'city') {
					this.cityShow = false
				}
			},
		},
	}
</script>

<style>
	.popup {
		width: 100vw;
		height: 1400rpx;
		background-color: #FFF;
	}

	.popupTitle {
		padding: 20rpx;
		// border-bottom: 1rpx solid #f0f0f0;
	}

	.popupCity {
		padding: 20rpx;
		background: #f0f0f0;
		// border-bottom: 1rpx solid #f0f0f0;
	}

	.popupLabelBoxs {
		padding: 20rpx;
	}

	.popupBottom {
		position: absolute;
		z-index: 800;
		width: 100vw;
		bottom: 0rpx;
		height: 100rpx;
		border-top: 1rpx solid #e0e0e0;
	}

	.popupClearBtn {
		width: 35vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		background: #e0e0e0;
		border: 0rpx;
		color: #000;
		margin: 10rpx;
	}

	.popupSubmitBtn {
		width: 60vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		background-color: #FFDD00;
		border: 0rpx;
		color: #000;
		margin: 10rpx;
	}
</style>